<template>
  <div class="resetPage">
    <img src="../assets/LoginImage.png" alt="" class="loginImage"/>
    <div class="resetForm">
      <h3>找回密码</h3>
      <form @submit.prevent>
        <input type="email" placeholder="邮箱" v-model="email" />
        <div class="verification">
          <input type="text" placeholder="邮箱验证码" v-model="verification" />
          <el-button class="getCode" @click="sendCode" :disabled="isDisable">
            {{ isDisable ? `${sec}秒后重新发送` : "获取邮箱验证码" }}
          </el-button>
        </div>
        <input type="password" placeholder="新密码" v-model="password" />
        <input type="password" placeholder="确认密码" v-model="confirmPw" />
        <div class="buttonBar">
          <button type="submit" class="submit" @click="submitNewPw">提交</button>
          <button class="returnLogin" @click="returnToLogin">返回</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ElMessageBox } from "element-plus";
import axios from "axios";
import qs from "qs";
import { throttle } from "../apis/throttle.js";
import { ref } from "vue";

const router = useRouter();

let password = ref("");
let confirmPw = ref("");

let email = ref("");
const emailReg = /^([A-z0-9]{6,18})(\w|-)+@[A-z0-9]+\.([A-z]{2,3})$/;
let isDisable = ref(false);
let buttonCol = ref("#ffa000");
let sec = ref(60);
let data_code = ref("");
let verification = ref("");

function getVerificationCode() {
  if (email.value === "") {
    ElMessageBox.alert('请先填写邮箱信息', '警告');
  } else if (emailReg.test(email.value) === false){
    ElMessageBox.alert('邮箱格式错误', '错误');
  } else {
    axios.post("/api/forget/sendMail", qs.stringify({
      "email": email.value,
    }))
        .then((response) => {
          console.log(response);
          let data = response.data;
          if (!data.status) {
            ElMessageBox.alert('未知错误,请联系管理员', '发送失败');
          } else {
            data_code = data.code.toString();
            ElMessageBox.alert('请在3分钟内填写验证码', '发送成功');
            isDisable.value = true;
            buttonCol.value = "#b1d5c8";
            let timer = setInterval(() => {
              sec.value--;
            }, 1000);

            setTimeout(() => {
              clearInterval(timer);
              isDisable.value = false;
              buttonCol.value = "#ffa000";
              sec.value = 60;
            }, 60000);
          }
        })
        .catch((err) => {
          console.log(err);
          ElMessageBox.alert('网络错误，请检查网络连接后重试', '发送失败');
        })
  }
}

let sendCode = throttle(getVerificationCode, 3500);

function setNewPw() {
  if (verification.value === "") {
    ElMessageBox.alert("请填写邮箱验证码!", "警告");
  } else if (verification.value !== data_code) {
    ElMessageBox.alert("验证码错误!", "警告");
  } else if (password.value === "") {
    ElMessageBox.alert("请填写密码!", "警告");
  } else if (password.value.length < 6 || password.value.length >= 25){
    ElMessageBox.alert("密码长度小于6个字符或大于25个字符!", "警告");
  } else if (password.value !== confirmPw.value) {
    ElMessageBox.alert("密码与确认密码不匹配!", "警告");
  } else {
    axios.post("/api/forget/setPassword", qs.stringify({
      "email": email.value,
      "password": password.value,
    }))
        .then((response) => {
          console.log(response);
          let data = response.data;
          if (data.status) {
            ElMessageBox.alert(data.msg, "提示");
            router.replace("/login");
          } else {
            ElMessageBox.alert(`修改失败: ${data.msg}`, "错误");
          }
        })
        .catch((err) => {
          console.log(err);
          ElMessageBox.alert('网络错误，请检查网络连接后重试', '重置失败');
        })
  }
}

let submitNewPw = throttle(setNewPw, 2500);

function returnToLogin() {
  router.replace("/login");
}
</script>

<style scoped>
.resetPage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5vw;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  background: #f8f9fb;

  padding: 0 10vw;
}

.loginImage {
  border-radius: 15px;
  max-width: 400px;
  position: relative;
  top: -26px;
  left: -30px;
  justify-self: end;
}

.resetForm {
  justify-self: start;
  box-shadow: 0 4px 48px rgba(0, 0, 0, 0.06);
  border-radius: 32px;
  background: white;
  padding: 74px 60px;
  margin-bottom: 32px;

  display: grid;
  place-items: center;
  row-gap: 52px;
  width: 380px;
}

.resetForm > form {
  display: grid;
  row-gap: 24px;
  width: 100%;
  height: 100%;
}

input {
  background: #fafafa;
  border-radius: 8px;
  border: none;
}

input:focus {
  border: 1px #6e9bc5 solid;
  border-radius: 8px;
}

input::placeholder {
  color: #9e9e9e;
}

.verification {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.verification input {
  width: 55%;
}

.verification .getCode {
  background: v-bind(buttonCol);
  padding: 10px 0;
  width: 40%;
  color: white;
  border: none;
  border-radius: 14px;
}

.buttonBar {
  margin-top: 20px;
  color: #a1a1a1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.buttonBar button {
  width: 130px;
  padding: 12px 0;
  color: white;
  border: none;
  border-radius: 40px;
}

.submit {
  background: linear-gradient(
      89.93deg,
      #00c2ff 0.06%,
      #0047ff 105.68%
  );
}

.returnLogin {
  background: linear-gradient(
      89.93deg,
      #fab005 0.06%,
      #dce775 105.68%
  );
}
</style>